<script setup lang="ts">
import { ref, reactive, watch, } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import useRouteList from './routeList'

const emits = defineEmits(['close'])
const props = defineProps<{
	visible: boolean
	editNode: { [key: string]: any }
}>()
interface routeItemType {
	name: string
	path: string
	component: string
	noNeedAuth: 1 | 0 | undefined
	title: string
	noInMenu: 1 | 0
	icon: string
	rank?: number
	noKeepAlive: 1 | 0
	affix: 1 | 0
	hiddenMenu: 1 | 0
	hiddenLayout: 1 | 0
	link: 1 | 0
	[key: string]: any
}

const routeItem: routeItemType = reactive({
	name: '',
	path: '',
	component: '',
	noNeedAuth: undefined,
	title: '',
	noInMenu: 0,
	icon: '',
	rank: undefined,
	noKeepAlive: 0,
	affix: 0,
	hiddenMenu: 0,
	hiddenLayout: 0,
	link: 0,
})

const formInstance = ref<FormInstance | null>(null)
const isSuccessOperate = ref(false)
const routeList = useRouteList()
const confirmLoading = ref(false)
const formLayout = {
	style: 'margin: 0 10px',
	labelCol: { span: 6 },
	wrapperCol: { span: 18 },
	labelAlign: 'left',
}
const rowFormItemLayout = {
	labelCol: { span: 3 },
	wrapperCol: { span: 21 },
}
const rules =ref({
	name: [{ required: true, message: '请输入路由名！', trigger: 'change' }],
	component:[
		{pattern:/^\/.*(.vue)$/, message: '组件路径必须以 / 开头，以.vue结尾！', trigger: 'change' }
	],
	path: [
	 {required: true, message: '请输入跳转路径！', trigger: 'change' },
	 {pattern:/.*/, message: '外部链接必须以http或者https开头！', trigger: 'change' }
  ],
	title: [{ required: true, message: '请输入路由标题！', trigger: 'change' }],
})


function showBack() {
	const booleanVKey = ['noNeedAuth', 'noInMenu', 'noKeepAlive', 'affix', 'hiddenMenu', 'hiddenLayout', 'link']
	formInstance.value?.resetFields()
	Object.keys(routeItem).forEach((k) => {
		if (booleanVKey.includes(k)) routeItem[k] = props.editNode[k] ? 1 : 0
		else routeItem[k] = props.editNode[k]
	})
}

async function handleOk() {
	try {
		const values = await formInstance.value?.validate()
		const params: routeTreeNode = { ...props.editNode, ...(values as routeItemType), id: props.editNode.id } as routeTreeNode
		const res = await routeList.updateItem(params)
		if (res.code == 200) {
			isSuccessOperate.value = true
			emits('close', isSuccessOperate.value)
		} else if (res.code == 201) message.error('路由名已存在！')
	} catch (error) {
		console.log(error)
	}
}

watch(()=>routeItem.link,(v)=>{
  if(v) rules.value.path[1].pattern=/^(http | https).*/
	else rules.value.path[1].pattern=/.*/
},{immediate:true})


watch(
	() => props.visible,
	(nv) => {
		if (nv) {
			isSuccessOperate.value = false
			showBack()
		}
	}
)
</script>

<template>
	<my-modal  
	toggleFull
	:visible="visible"
	title="更新子路由"
	:maskClosable="false"
	width="80%"
	@ok="handleOk"
	@cancel="emits('close')"
	:confirmLoading="confirmLoading"
	:bodyStyle="{ maxHeight: $getModalBodyMaxHeight() + 'px', overflow: 'auto' }"
	>
		<a-form :model="routeItem" :rules="rules" v-bind="formLayout" ref="formInstance" name="route_update">
			<a-row :gutter="[24, 8]">
				<a-col :span="24">
					<a-form-item name="name" label="路由名" v-bind="rowFormItemLayout">
						<a-input v-model:value="routeItem.name" placeholder="路由名是路由id必须唯一" allowClear />
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item name="path" label="跳转路径" v-bind="rowFormItemLayout">
						<a-input v-model:value="routeItem.path" placeholder="填符合vue-router规范的路由路径,也可以是外链" allowClear />
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item name="component" label="组件路径" v-bind="rowFormItemLayout">
						<a-input v-model:value="routeItem.component" placeholder="输入的组件路径会和'@/views'拼接，有路径则为叶子节点，不能为其添加子路由" allowClear />
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item name="noNeedAuth" label="是否可无权访问" v-bind="rowFormItemLayout">
						<a-select v-model:value="routeItem.noNeedAuth" placeholder="为ture则不校验所有权限" allowClear>
							<a-select-option :value="1">是</a-select-option>
							<a-select-option :value="0">否</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item name="title" label="标题">
						<a-input v-model:value="routeItem.title" placeholder="如果存在菜单中，也将作为菜单项的标题" allowClear />
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item name="noInMenu" label="是否存在菜单中">
						<a-select v-model:value="routeItem.noInMenu" placeholder="是否存在菜单中" allowClear>
							<a-select-option :value="1">否</a-select-option>
							<a-select-option :value="0">是</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item name="icon" label="图标">
						<a-input v-model:value="routeItem.icon" placeholder="图标使用的是阿里的Font class方式" allowClear />
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item name="noKeepAlive" label="是否缓存">
						<a-select v-model:value="routeItem.noKeepAlive" placeholder="是否缓存" allowClear>
							<a-select-option :value="1">否</a-select-option>
							<a-select-option :value="0">是</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item name="affix" label="是否固定到tab">
						<a-select v-model:value="routeItem.affix" placeholder="是否固定该页面到快捷tab导航" allowClear>
							<a-select-option :value="1">是</a-select-option>
							<a-select-option :value="0">否</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item name="hiddenMenu" label="是否隐藏菜单">
						<a-select v-model:value="routeItem.hiddenMenu" placeholder="跳转到该路由后，菜单不可见" allowClear>
							<a-select-option :value="1">是</a-select-option>
							<a-select-option :value="0">否</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item name="hiddenLayout" label="是否隐藏布局">
						<a-select v-model:value="routeItem.hiddenLayout" placeholder="跳转到该路由后，布局不可见" allowClear>
							<a-select-option :value="1">是</a-select-option>
							<a-select-option :value="0">否</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item name="link" label="是否跳往外部链接">
						<a-select v-model:value="routeItem.link" placeholder="点击菜单可以跳转到外部链接，此时path是链接地址" allowClear>
							<a-select-option :value="1">是</a-select-option>
							<a-select-option :value="0">否</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item name="rank" label="排序序号"  v-bind="rowFormItemLayout">
						<a-input-number v-model:value="routeItem.rank" placeholder="如果存在菜单中，作为在菜单中的排序序号" style="width: 100%" allowClear />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</my-modal>
</template>

<style lang="less" scoped>


</style>


